<template>
  <fieldset class="one">
    <aside class="a1">购物车</aside>
    <hr>
    <article>
      <ul v-for=" (item,index) in product" :key="item">
        <li>{{item.pro}}</li>
        <li>{{item.price}}</li>
        <li><button @click="jiajian(1,index)">+</button>{{item.num}}<button @click="jiajian(-1,index)">-</button></li>
      </ul>
      <aside class="a2">
        <p>总价：￥{{sumPrice}}</p>
      <button @click="btn1()">去结算</button>
      </aside>
    </article>
  </fieldset>

  <MyOrder :sonsum='fsum'  v-if="a==1" />
</template>

<script setup>
import { reactive, ref,computed } from 'vue'
import MyOrder from './MyOrder.vue'
let a = ref(0)
let fsum = ref('')




const  product =reactive([ 
      {pro:'红豆薏米粥套餐' , price:'37' , num:2},
      {pro:'皮蛋瘦肉粥套餐' , price:'31' , num:1},
      {pro:'蜜瓜圣女萝莉杯' , price:'6' , num:3},
      {pro:'加多宝' , price:'6' , num:5},
    

])
const btn1 =()=>{
  a.value=1;
  fsum.value= sumPrice
  console.log(fsum.value);
  
}
const jiajian =(n,i)=>{
     product[i].num += n;
      if (product[i].num<=0){
       product[i].num=1
      
  }
  
}
const sumPrice = computed(()=>{
  let sum = 0;
  product.forEach((item)=>{
    sum += item.price*item.num
  })
  return sum.toFixed(2);
});
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.one{
    width: 500px;
    margin:0 auto;
}
.one ul{
  display: flex;
  justify-content: space-around;
}
.one ul li{
  list-style: none;
  width: 120px;
  text-align: center;
}
.one ul li button{
  border: 0;
  width: 35px;
  line-height: 35px;
  border-radius: 100%;
}
.a1{
  width: 100%;
  line-height: 30px;
}
.a2{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.a2 button{
  border: 0;
  background-color: yellow;
  font-weight: 500;
  line-height: 30px;
  width: 150px;
  border-radius: 8px;
}
.a1 ul li button:hover{
  cursor: pointer;
  
}
.a1 ul li button.active{
  background-color: darkgreen;
  color: white;
}
</style>